<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/login.css">
    <style>
        .login-dialog {
            height: 450px;
        }
        html,body {
            background-image: url(image/bg.jpg);
        }
        #passwordError {
            display: block;
            width: 0px;
            font-weight: 0;
        }
    </style>


</head>
<body>
    <div class="nav"><a href="./login.html">五子棋对战</a></div>
    <div class="login-container">
        <div class="login-dialog">
            <h3>注册</h3>
            <div class="row">
                <span>用户名</span>
                <input type="text" id="username">
            </div>
            <div class="error" id="usernameError"></div>
            <div class="row">
                <span>密码</span>
                <input type="password" id="password1" onblur="checkPassword1()">
            </div>
            <div class="error" id="passwordError1"></div>

            <div class="row">
                <span>确认密码</span>
                <input type="password" id="password2" onblur="checkPassword2()"> 
            </div>
            <div class="error" id="passwordError2"></div>

            <div class="row submit-row">
                <button id="submit">注册</button>
            </div>
            <div class="link">已有账号？<a href="login.html">登入</a></div>
        </div>
    </div>

    <script src="./js/jquery.min.js"></script>

    <script>
        let usernameInput = document.querySelector('#username');
        let passwordInput1 = document.querySelector('#password1');
        let passwordInput2 = document.querySelector('#password2');
        let submiButton = document.querySelector('#submit');

        function checkPassword1(){
            var res = /^[0-9a-zA-Z_]{6}$/.test(passwordInput1.value);
            if(!res){
                document.getElementById("passwordError1").innerHTML = "密码必须为6位自然数或字母组成!";
            }else{
                document.getElementById("passwordError1").innerHTML = "";
            }
        }
        function checkPassword2(){
            var res = /^[0-9a-zA-Z_]{6}$/.test(passwordInput2.value);
            if(!res){
                document.getElementById("passwordError2").innerHTML="密码必须为6位自然数或字母组成!";
            }else{
                document.getElementById("passwordError2").innerHTML="";
            }
        }
        submiButton.onclick = function(){
            if(isValid(passwordInput1.value,passwordInput2.value)){

                $.ajax({
                method:'post',
                url:'/register',
                data:{
                    username:usernameInput.value,
                    password:passwordInput1.value
                },
                success:function(data){
                    if(data && data.username){
                        alert("注册成功");
                        location.replace('/login.html');
                    }else{
                        alert("用户名已存在！注册失败！");
                    }
                }
                })
            }else{
                alert("两次密码不一致");
            }   
        }
        function isValid(p1,p2){
            return p1 === p2;
        }
    </script>

</body> 
</html>